<template>
  <div class="TemplateEdit">
    <a-row style="margin-left:1%" :gutter="0">
      <a-col :span="8">
        <p style="color: red">备注：模板中的商品修改后，将会在下次上货时生效</p>
      </a-col>
    </a-row>
    <a-form :form="form">
      <a-row :gutter="0">
        <a-col :span="8">
          <a-form-item label="模板名称" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
            <a-input
              placeholder="请输入商品模板名称"
              v-decorator="[
          'templateName',
          {rules: [{ required: true, message: '请输入模板名称!' }]}
        ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-card>
      <div class="title">
        <p>
          <span>占用列</span>
          <span>可摆放数量</span>
        </p>
        <p>
          <span>占用列</span>
          <span>可摆放数量</span>
        </p>
      </div>
      <a-transfer
        :dataSource="mockData"
        :listStyle="{
      width: '43%',
      height: '400px',
    }"
        showSearch
        :titles="['源列表', '目标列表']"
        :operations="['移入', '移出']"
        :targetKeys="targetKeys"
        @change="handleChange"
        :render="renderItem"
      ></a-transfer>
    </a-card>
    <a-row :gutter="30">
      <a-col :span="22" style="text-align:right;margin-top:2%">
        <router-link to="/home/goodsadmin/templateadmin">
          <a-button>取消</a-button>
        </router-link>
        <a-button type="primary" style="margin-left:1%" @click="editGoodsTemplate()">提交保存</a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "TemplateEdit",
  data() {
    return {
      form: this.$form.createForm(this),
      mockData: [],
      targetKeys: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < this.mockData.length; i++) {
        const agentGoodsList = {
          key: `${
            this.mockData[i].goodsId == null ? "" : this.mockData[i].goodsId
          }`,
          title: this.mockData[i].agencyName,
          occupancyColumn: this.mockData[i].occupancyColumn,
          placementNumber: this.mockData[i].placementNumber
        };
        mockData.push(agentGoodsList);
      }
      if (this.targetKeys == null) {
        this.targetKeys = null;
      } else {
        for (let i = 0; i < this.targetKeys.length; i++) {
          const templateDetailList = {
            key: `${
              this.targetKeys[i].goodsId == null
                ? ""
                : this.targetKeys[i].goodsId
            }`,
            title: this.targetKeys[i].agencyName,
            occupancyColumn: this.targetKeys[i].occupancyColumn,
            placementNumber: this.targetKeys[i].placementNumber
          };
          targetKeys.push(templateDetailList.key);
        }
      }
      this.mockData = mockData;
      this.targetKeys = targetKeys;
    },
    renderItem(item) {
      const customLabel = (
        <span class="custom-item">
          {item.title}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
          {item.occupancyColumn}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {item.placementNumber}
        </span>
      );

      return {
        label: customLabel, // for displayed item
        value: item.title // for title and filter matching
      };
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys;
    },

    // 编辑商品模板初始化
    editGoodsTemplateInit() {
      this.axios
        .post(this.baseUrl + "/goodsTemplate/editGoodsTemplateInit", {
          loginToken: this.$store.state.loginToken,
          goodsTemplateId: this.$store.state.goodsTemplateId
        })
        .then(response => {
          // console.log(response);
          this.mockData = response.data.data.agentGoodsList;
          this.goodsTemplateName = response.data.data.goodsTemplateName;
          this.targetKeys = response.data.data.templateDetailList;
          this.form.setFieldsValue({
            templateName: this.goodsTemplateName
          });
          this.getMock();
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 编辑商品模板
    editGoodsTemplate() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/goodsTemplate/editGoodsTemplate", {
          loginToken: this.$store.state.loginToken,
          goodsIdList: this.targetKeys,
          goodsTemplateId: this.$store.state.goodsTemplateId,
          templateName: values.templateName
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$router.push({
              path: "/home/goodsadmin/templateadmin"
            });
            this.$message.info("编辑成功");
          }
          if (response.data.code == -1) {
            this.$error({
              title: "商品互斥",
              content: `您模板中有外包装相似的商品，会造成系统将相似商品弄混淆，造成扣费错误，您可以在相似商品组中选择一个放置在模板中${
                response.data.msg
              }`
            });
          }
        });
    }
  },
  created() {
    this.editGoodsTemplateInit();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.TemplateEdit {
  width: 100%;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.title p:nth-of-type(1) {
  margin-left: 10%;
  width: 50%;
}
.title p:nth-of-type(2) {
  padding-left: 5%;
  width: 50%;
}
.title p:nth-of-type(2) span {
  margin: 0 10px;
}
</style>
